<template>
	<div class="dialog animated"  :class="isOpen? 'fadeIn':'fadeOut'"
		 v-show="isShow" :style="{visibility:(visible?'visible':'hidden')}">
		<div class="panel animated" :class="isOpen? 'zoomIn':''" :style="panelStyle">
			<div class="title" v-if="title || closeBtn">
				<span v-if="title">{{title}}</span>
				<div class="close" v-if="closeBtn" @click="close()"></div>
			</div>
			<slot></slot>
		</div>
	</div>
</template>

<script>
export default {
	data : function() {
		return {
			isShow : false,
			isOpen : false,
			visible : false,
			data: this.param || {},
		}
	},
	props:["param"],
	computed : {
		title : function() {
			return this.data.title;
		},
		closeBtn : function() {
			return (this.data.closeBtn == null? true : this.data.closeBtn);
		},
		panelStyle : function() {
			let width = this.data.width;
			return (width? {width: width + "rem"} : {});
		}
	},
	methods : {
		open : function() {
			let vm = this;
			//打开弹窗
			vm.isShow = true;
			setTimeout(function() { 
				vm.isOpen = true; 
				vm.visible = true;
			},1);
		},
		close : function() {
			let vm = this;
			//关闭弹窗
			vm.isOpen = false;
			setTimeout(function() {
				vm.isShow = false;
				vm.visible = false;
			},500);
		}
	}
}
</script>

<style scoped src="@/style/module/dialog.css"></style>
